/**
* 功能描述: 功能开关demo
* @author 崔孝楠
* @date 2022/9/29 9:17
* @version 1.0
*/
<template>
  <div>
    <!-- 带文字开关 -->
    <button id="switch-click" type="button" role="switch" class="yw-switch-checked yw-switch" @click="onChecked()" @focus="onFocus()" @blur="onBlur()">
      <div class="yw-switch-handle"></div>
      <span class="yw-switch-inner">{{ checked ? '开' : '关' }}</span>
      <div v-if="focused" class="yw-click-animating-node"></div>
    </button>
    <!-- loading状态开关 -->
    <button id="switch-click" type="button" role="switch" class="yw-switch-loading yw-switch-checked yw-switch">
      <div class="yw-switch-handle">
        <!-- loading图标 -->
        <span role="img" aria-label="loading" class="yw-switch-loading-icon">
          <svg focusable="false" class="yw-icon-spin" data-icon="loading" fill="currentColor" aria-hidden="true" viewBox="0 0 1024 1024">
            <path d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"></path>
          </svg>
        </span>
      </div>
    </button>

    <button type="button" role="switch" class="yw-switch yw-switch-loading">
      <div class="yw-switch-handle">
        <!-- loading图标 -->
        <span role="img" aria-label="loading" class="yw-switch-loading-icon">
          <svg focusable="false" class="yw-icon-spin" data-icon="loading" fill="currentColor" aria-hidden="true" viewBox="0 0 1024 1024">
            <path d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"></path>
          </svg>
        </span>
      </div>
    </button>
  </div>
</template>

<script>
export default {
  name: "index",
  data() {
    return {
      checked: true,
      focused: false,
    }
  },
  methods: {
    /**
     * 选中状态的样式
     */
    onChecked() {
      this.checked = !this.checked
      let switchDom = document.getElementById('switch-click')
      if (this.checked) {
        console.log('checked')
        switchDom.classList.add('yw-switch-checked')
      } else {
        console.log('no checked')
        switchDom.classList.remove('yw-switch-checked')
      }
    },
    /**
     * 开关聚焦
     */
    onFocus() {
      this.focused = true;
    },
    /**
     * 开关失焦
     */
    onBlur() {
      this.focused = false;
    }
  }
}
</script>

<style scoped>

</style>
